<template>
  <div class="leave-info-container">
    <van-nav-bar
      class="app-nav-bar"
      title="销假"
      left-arrow
      @click-left="$router.back()"
    />
      <div class="tab_field">
        <van-form input-align="right">
        <van-field
          v-model="fieldInfo.name"
          name="请假人"
          label="请假人"
        />
        <van-field
          v-model="fieldInfo.mobile"
          name="联系方式"
          label="联系方式"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="fieldInfo.type"
          label="请假类型"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="fieldInfo.lea_school"
          label="是否离校"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="start_date"
          label="开始时间"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="end_date"
          label="结束时间"
        />
        <van-field
          readonly
          clickable
          name="picker"
          :value="fieldInfo.place"
          label="销假地点"
        />
        <van-field
          v-model="fieldInfo.sos_mobile"
          name="紧急联系人"
          label="紧急联系人"
        />
        <van-field
          v-model="fieldInfo.message"
          rows="2"
          autosize
          readonly
          label="请假事由"
          type="textarea"
          maxlength="50"
        />
        </van-form>
        <div class="login-btn-wrap">
          <van-button
            class="login-btn"
            type="info"
            block
            :disabled='disabled'
            @click="onSubmit"
          >确认销假</van-button>
      </div>
      </div>
  </div>
</template>

<script>
import { getLeave, updateLeave } from '@/api/leave'
export default {
  name: 'leaveInfoIndex',
  components: {},
  props: {},
  data () {
    return {
      disabled: false,
      start_date: null,
      end_date: null,
      fieldInfo: {
        name: '',
        mobile: null,
        type: '事假', // 请假类型
        lea_school: '否', // 是否离校
        place: '', // 销假地点
        start_date: null,
        end_date: null,
        sos_mobile: '',
        message: '',
        rate: 0,
        examine: '审核中', // 审核情况
        status: null // 是否销假
      }
    }
  },
  computed: {},
  watch: {},
  created () {
    console.log(this.$route.query)
    getLeave({
      _id: this.$route.query.id
    }).then(res => {
      console.log(res)
      this.fieldInfo = res.data.data[0]
      // console.log(this.getLocalTime(this.fieldInfo.start_date))
      this.start_date = this.getLocalTime(this.fieldInfo.start_date)
      this.end_date = this.getLocalTime(this.fieldInfo.end_date)
      if (this.fieldInfo.status === '是') {
        this.disabled = true
      }
    })
  },
  mounted () {

  },
  methods: {
    onSubmit () {
      this.fieldInfo.status = '是'
      this.fieldInfo.rate = this.$route.query.rate
      // console.log(this.fieldInfo)
      updateLeave(this.fieldInfo).then(res => {
        // console.log(res)
        this.$toast.success({
          message: '销假成功'
        })
        history.go(-1)
      })
    },
    getLocalTime (v) {
      // console.log(this.fieldInfo.start_date)
      return new Date(parseInt(v)).toLocaleString().replace(/年|月/g, '-').replace(/日/g, ' ')
    }
  }
}
</script>

<style scoped lang="scss">
.van-cell {
  border-radius: 10px;
  margin: 10px 0;
}
.tab_field {
  padding: 0 10px;
}
</style>
